<template>
    <tr>
          <td><input type="checkbox" v-model="checked_1" /></td>
          <td>{{ name }}</td>
          <td>{{ price }}</td>
          <td>
            <button @click="toolFn()">-</button> {{ num }}
            <button @click="addFn()">+</button>
          </td>
          <td>{{ price * num }}</td>
          <td><button @click="delFn()">删除</button></td>
        </tr>
</template>

<script>
export default {
    props:['name','num','price','checked','index'],
    data(){
      return{
        checked_1:this.checked
      }
    },
    methods: {
    addFn() {
     this.$emit('addFn',this.index)
    },
    toolFn() {
      this.$emit('toolFn',this.index)
    },
    delFn() {
      this.$emit('delFn',this.index)
    },
  },
  watch:{
    checked_1:{
        immediate:true,
        deep:true,
        handler(){
            this.$emit('changeChecked',this.checked_1,this.index)
        }
    },

    checked:{
       immediate:true,
        deep:true,
        handler(){
            this.checked_1 = this.checked
        }
    }
    
  }
}
</script>

<style>

</style>